<script setup>
// 从Vue中导入响应式数据ref，以及生命周期钩子函数onMounted、onUnmounted、onActivated、onDeactivated
import {ref, onMounted, onUnmounted, onActivated, onDeactivated} from "vue";

// 创建响应式数据count，初始值为0，用于展示和修改计数
const count = ref(0);

// 当组件被挂载到DOM时触发的钩子函数
onMounted(() => {
    // 在控制台打印"MyLeft组件被挂载了"，提示组件挂载完成
    console.log("MyLeft组件被挂载了");
})

// 当组件从DOM中卸载时触发的钩子函数
onUnmounted(() => {
    // 在控制台打印"MyLeft组件被销毁了"，提示组件卸载完成
    console.log("MyLeft组件被销毁了")
})

// 当被KeepAlive缓存的组件被激活（再次显示）时触发的钩子函数
onActivated(() => {
    // 在控制台打印"MyLeft组件被激活了"，提示组件从缓存中被激活
    console.log("MyLeft组件被激活了")
})

// 当被KeepAlive缓存的组件失活（被隐藏但仍在缓存中）时触发的钩子函数
onDeactivated(() => {
    // 在控制台打印"MyLeft组件被缓存了"，提示组件进入缓存状态
    console.log("MyLeft组件被缓存了")
})
</script>

<template>
    <!-- 展示组件标识文本 -->
    MyLeft组件
    <div>
        <!-- 展示count的值 -->
        count值是：{{ count }}
        <!-- 点击按钮时，count的值加1 -->
        <button @click="count++">+1</button>
    </div>
</template>

<style scoped>
/* 这里可以编写当前组件的局部样式，由于没有内容，暂时为空 */
</style>